<template>
    <div>
      <div>
        <el-table
            :data="tableData"
            stripe
            style="width: 100%;">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-table
                  class="replay-expand-table"
                  :data="props.row.comlist"
                  style="width: 100%;margin-left: 35px">
                <el-table-column
                    prop="id"
                    label="回复ID"
                    sortable
                    width="80px">
                </el-table-column>
                <el-table-column
                    prop="content"
                    label="回复内容">
                </el-table-column>
                <el-table-column
                    label="发送者"
                    width="180px">
                  <template slot-scope="scope">
                    <div style="display: flex;align-items: center">
                      <el-avatar :src="baseURL+scope.row.sendpic"></el-avatar>
                      <span style="margin-left: 5px">{{scope.row.sendname}}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                    label="回复者"
                    width="180px">
                  <template slot-scope="scope">
                    <div style="display: flex;align-items: center" v-if="scope.row.receiveid">
                      <el-avatar :src="baseURL+scope.row.receivepic"></el-avatar>
                      <span style="margin-left: 5px">{{scope.row.receivename}}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                    label="回复日期"
                    sortable
                    prop="create_date"
                    width="180px">
                </el-table-column>
                <el-table-column
                    sortable
                    prop="tag"
                    label="类型" width="80px">
                  <template slot-scope="scope">
                    <el-tag
                        :type="repaytype(scope.row.tag).style"
                        disable-transitions>{{(repaytype(scope.row.tag)).label}}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="user_state"
                    label="状态"
                    sortable
                    width="100px">
                  <template slot-scope="scope">
                    <el-switch
                        v-model="scope.row.is_show"
                        :active-value="1"
                        :inactive-value="0"
                        @change="val=>(swichReplayEvent(val,scope.row.id))">
                    </el-switch>
                  </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作">
                  <template slot-scope="scope">
                    <el-button type="danger" plain @click="deleteReplayClick(scope.row.id)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column
              label="ID"
              prop="id"
              sortable
              width="80px">
          </el-table-column>
          <el-table-column
              label="评论内容"
              prop="content">
          </el-table-column>
          <el-table-column
              label="作者信息"
              width="180px">
            <template slot-scope="scope">
              <div style="display: flex;align-items: center">
                <el-avatar :src="baseURL+scope.row.user_pic"></el-avatar>
                <span style="margin-left: 5px">{{scope.row.username}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
              label="评论日期"
              sortable
              prop="create_time"
              width="180px">
          </el-table-column>
          <el-table-column
              label="点赞量"
              prop="likeq"
              sortable
              width="80px">
          </el-table-column>

          <el-table-column
              sortable
              prop="tag"
              label="类型" width="80px">
            <template slot-scope="scope">
              <el-tag
                  :type="repaytype(scope.row.tag).style"
                  disable-transitions>{{(repaytype(scope.row.tag)).label}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
              prop="user_state"
              label="状态"
              sortable
              width="100px">
            <template slot-scope="scope">
              <el-switch
                  v-model="scope.row.is_show"
                  :active-value="1"
                  :inactive-value="0"
                  @change="val=>(swichEvent(val,scope.row.id))">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作">
            <template slot-scope="scope">
              <el-button type="danger" plain @click="deleteClick(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            layout="prev, pager, next"
            :total="total">
        </el-pagination>
      </div>
    </div>
</template>

<script>
import menu from '@/assets/menu.json'
import {
  deleAclReplay,
  deleArticleReplay,
  deleBanner,
  editAclReplay,
  editArticleReplay,
  getArticleReplay
} from '@/request'
export default {
  name: "Replay",
  data(){
    return {
      id:null,
      tableData:[],
      total:0,
      pagenum:0,
      formSearch:{
        uid:null,
        content:null
      },
    }
  },
  computed:{
    repaytype(){
        return function(value){
          let item= menu.ReplayType.find(o=>o.value==value);
          return item;
      }
    }
  },
  watch:{
    "$route.params":{
      immediate:true,
      handler(newVal){
        this.id=newVal.id;
        this.getarticleReplay();
      }
    }
  },
  methods:{
    init(){
      this.pagenum=0
      this.total=0
    },
    async getarticleReplay(){
      if(this.pagenum*10>this.total)return;
      this.pagenum++;
      this.formSearch['pagenum']=this.pagenum;
      this.formSearch['aid']=this.id;
      let data=await getArticleReplay(this.formSearch);
      if(data.code!=200)return this.$message.error(data.message);
      this.tableData=data.data.list;
      this.total=data.data.total;
    },
    async swichEvent(val,id){
      let data=await editArticleReplay({id,is_show:val});
      if(data.code!=200)return this.$message.error(data.message);
      this.$message.success(data.message);
    },
    async swichReplayEvent(val,id){
      let data=await editAclReplay({id,is_show:val});
      if(data.code!=200)return this.$message.error(data.message);
      this.$message.success(data.message);
    },
    deleteClick(id){
      this.$confirm('您将删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let data=await deleArticleReplay({id});
        if(data.code!=200)return this.$message.error(data.message);
        this.$message.success('删除成功!');
        this.init();
        this.getarticleReplay();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    deleteReplayClick(id){
      this.$confirm('您将删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let data=await deleAclReplay({id});
        if(data.code!=200)return this.$message.error(data.message);
        this.$message.success('删除成功!');

        this.init();
        this.getarticleReplay();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  }
}
</script>

<style lang="scss" scoped>
/deep/ .replay-expand-table tr{
  background-color: #fafdff;
}
/deep/ .replay-expand-table th.el-table__cell{
  background-color: #fafdff;
}
</style>